<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>商城会员</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		body {
			background-color: #FFFFFF;
		}

		.header_title {
			width: 17.25rem;
			height: 7.5rem;
			background: url('../../image/bg/bg_jifen.png') no-repeat;
			background-size: 100% 100%;
			border: 0.1px solid transparent;
		}

		.currrent_price {
			margin-top: 2.1rem;
		}

		.detail {
			height: 2.65rem;
			background: rgba(255, 255, 255, 1);
			display: flex;
			align-items: center;
			padding: 0.75rem;
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
		}

		.detail_item>div .top_item {
			display: flex;
			justify-content: space-between;
		}

		.detail_item>div {
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
			;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
		}
	</style>
</head>

<body>
	<div id="app">
		<!-- 会员卡片 -->
		<div style="padding: 0.5rem 0.75rem;padding-bottom:0">
			<div class="header_title">
				<div class="currrent_price">
					<div style="margin-left:1.7rem;font-size:0.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(255,255,255,1);">当前金币</div>
					<div style="margin-left:1.8rem;font-size:2rem;font-family:Akrobat-Bold ;color:rgba(255,255,255,1);line-height:2.45rem;">{{gold}}.00</div>
				</div>
				<div style="margin-left:12.45rem;font-size:0.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(255,255,255,1);line-height:0.9rem;">
					<span>{{level_name}}</span>
					<span tapmode onclick="open_win_page('会员规则')" style="display:inline-block;width:0.8rem;height:0.8rem;border-radius:50%;border:1px solid rgba(255,255,255,1);;text-align:center;line-height:0.8rem;">?</span>
				</div>
			</div>
		</div>

		<!-- 明细记录 -->
		<div class="detail">
			<img src="../../image/icon/lines.png" style="width:0.2rem;height:0.7rem;margin-right:0.25rem;font-size:0.85rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(51,51,51,1);line-height:1.2rem;">
			<span> 明细记录</span>
		</div>

		<!-- 具体事项 -->
		<div class="detail_item" style="padding:0.75rem;">
			<div v-for="vo in info">
				<!--  -->
				<div class="top_item">
					<div style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);line-height:1.05rem;">{{vo.remark}}</div>
					<div :class="{'flag-add':vo.flag=='+'}" style="font-size:0.75rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(34,34,34,1);line-height:1.05rem;margin-bottom:0.1rem;">
						{{vo.flag}}{{vo.gold}}
					</div>
				</div>
				<!--  -->
				<div style="font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);line-height:0.85rem;">
					{{vo.add_time}}
				</div>

			</div>
		</div>
		<!-- <div class="detail" > -->

		<!-- 明细记录 -->
		<!-- <div>
			<div class="mingxi aui-border-b">
				<img src="../../image/icon/lines.png">
				明细记录
			</div>
			<div class="record-list">
				<div v-for="vo in info" class="aui-border-b" style="padding: .5rem 0;">
					<div class="record-list-content">
						<div>{{vo.remark}}</div>
						<div :class="{'flag-add':vo.flag=='+'}">
							{{vo.flag}}{{vo.gold}}
						</div>
					</div>
					<div class="record-list-time">
						{{vo.add_time}}
					</div>
				</div>
			</div>
		</div> -->
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			info: [],
			level_name: '注册会员',
			gold: 0,
			page: 1,
			loadmore: true
		},
		methods: {
			get_list: function() {
				get_data('api/User/goldList', {
					token: $api.getStorage('token'),
					page: vm.page
				}, function(ret) {
					if (ret.status) {
						vm.gold = ret.data.gold
						vm.level_name = ret.data.level_name
						if (ret.data.list.length < 20) {
							vm.loadmore = false
						}
						ret.data.list.forEach(function(el) {
							vm.info.push(el)
						})
					}
				})
			}
		}
	})
	apiready = function() {
		vm.get_list()
		fnInitPullRefresh(function(ret) {
				vm.page = 1
				vm.loadmore = true
				vm.info = []
				vm.level_name = '注册会员'
				vm.gold = 0
				vm.get_list()
			})
			// 新版刷新
		refresh_new(function() {
			setTimeout(function() {
				vm.page = 1
				vm.loadmore = true
				vm.info = []
				vm.level_name = '注册会员'
				vm.gold = 0
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})
		fnInitScrollToBottom(function(ret) {
			if (vm.loadmore) {
				vm.page++;
				vm.get_list()
			}
		})
	}
</script>

</html>
